<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置 - 图文视频社交App</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="components.css">
    <style>
        .settings-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        
        .settings-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            color: #666;
        }
        
        .settings-group {
            margin-bottom: 16px;
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
        }
        
        .settings-group-title {
            font-size: 14px;
            color: #999;
            padding: 0 16px;
            margin-bottom: 8px;
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- 状态栏 -->
    <div class="status-bar">
        <div class="status-bar-time">14:30</div>
        <div class="status-bar-icons">
            <i class="fas fa-signal"></i>
            <i class="fas fa-wifi"></i>
            <i class="fas fa-battery-full"></i>
        </div>
    </div>

    <!-- 顶部导航 -->
    <div class="flex justify-between items-center px-4 py-2 bg-white">
        <div class="flex items-center">
            <i class="fas fa-arrow-left text-gray-600 mr-3 text-xl"></i>
            <div class="text-lg font-medium">设置</div>
        </div>
    </div>

    <!-- 设置内容 -->
    <div class="content-container p-4">
        <!-- 账号设置 -->
        <div class="settings-group-title">账号设置</div>
        <div class="settings-group">
            <div class="settings-item">
                <div class="flex items-center">
                    <div class="settings-icon">
                        <i class="fas fa-user"></i>
                    </div>
                    <div>个人资料</div>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            
            <div class="settings-item">
                <div class="flex items-center">
                    <div class="settings-icon">
                        <i class="fas fa-lock"></i>
                    </div>
                    <div>账号安全</div>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            
            <div class="settings-item">
                <div class="flex items-center">
                    <div class="settings-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div>隐私设置</div>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
        </div>

        <!-- 通用设置 -->
        <div class="settings-group-title mt-6">通用设置</div>
        <div class="settings-group">
            <div class="settings-item">
                <div class="flex items-center">
                    <div class="settings-icon">
                        <i class="fas fa-bell"></i>
                    </div>
                    <div>消息通知</div>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            
            <div class="settings-item">
                <div class="flex items-center">
                    <div class="settings-icon">
                        <i class="fas fa-moon"></i>
                    </div>
                    <div>深色模式</div>
                </div>
                <div class="relative inline-block w-10 align-middle select-none">
                    <input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer checked:right-0 checked:border-pink-600"/>
                    <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
                </div>
            </div>
            
            <div class="settings-item">
                <div class="flex items-center">
                    <div class="settings-icon">
                        <i class="fas fa-globe"></i>
                    </div>
                    <div>语言</div>
                </div>
                <div class="flex items-center">
                    <span class="text-gray-500 mr-2">简体中文</span>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
            
            <div class="settings-item">
                <div class="flex items-center">
                    <div class="settings-icon">
                        <i class="fas fa-trash"></i>
                    </div>
                    <div>清除缓存</div>
                </div>
                <div class="text-gray-500">128MB</div>
            </div>
        </div>

        <!-- 关于 -->
        <div class="settings-group-title mt-6">关于</div>
        <div class="settings-group">
            <div class="settings-item">
                <div class="flex items-center">
                    <div class="settings-icon">
                        <i class="fas fa-info-circle"></i>
                    </div>
                    <div>关于我们</div>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            
            <div class="settings-item">
                <div class="flex items-center">
                    <div class="settings-icon">
                        <i class="fas fa-file-alt"></i>
                    </div>
                    <div>用户协议</div>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            
            <div class="settings-item">
                <div class="flex items-center">
                    <div class="settings-icon">
                        <i class="fas fa-user-shield"></i>
                    </div>
                    <div>隐私政策</div>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            
            <div class="settings-item">
                <div class="flex items-center">
                    <div class="settings-icon">
                        <i class="fas fa-code"></i>
                    </div>
                    <div>版本信息</div>
                </div>
                <div class="text-gray-500">v1.0.0</div>
            </div>
        </div>

        <!-- 退出登录 -->
        <div class="mt-8">
            <button class="w-full py-3 bg-white text-pink-600 font-medium rounded-lg">退出登录</button>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html> 